<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1 id="counter"></h1>
        <button onclick="getCounter()">取出</button>
        <button onclick="setCounter()">存入</button>
        <button onclick="asyncGet()">异步取出</button>
    </div>




    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>

        let store ={
            state:{
                counter:666,
            },
            //同步操作执行
            commit:function(fnName){
                this.mutations[fnName](this.state)
            },
            //异步操作执行
            dispatch:function(fnName){
                this.actions[fnName](this.state)
            },
            //同步操作存放处
            mutations:{
                getCounter:function(state){
                    console.log(state);
                    state.counter--;
                },
                setCounter:function(state){
                    state.counter++;
                }
            },
            //异步操作存放处
            actions:{
                asyncGet:function(state){
                    setTimeout(() => {
                        state.counter++
                    }, 3000)
                }
            }


        }
        function init() {
            document.getElementById("counter").innerHTML=store.state.counter  
        }
        init();
        function getCounter() {
            store.commit("getCounter") ;
            init();
        }
        function setCounter() {
            store.commit("setCounter") ;
            init();
        }
        function asyncGet() {
            store.dispatch("asyncGet") ;
            init();
        }
    </script>
</body>
</html>